<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body id="app">
		<vueheader></vueheader>
		<!--<ul>
			<li>123</li>
			<li>456</li>
		</ul>-->
		<!--<vuecontent></vuecontent>-->
		<a href="#!/a">a</a>
		<a href="#!/index">index</a>
		<a href="#!/li">li</a>
		<a href="#!/b?name=1&skill=ps">b</a>
		<a v-link="{path:'/b',query:{name:1,skill:'ps'}}">b</a>
		<a v-link="{name:'b',params:{name:1,skill:'ps'}}">b</a>
		<router-view></router-view>
	</body>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
	</style>
	<script src="./vue.js"></script>
  <!--vue的路由服务-->
	<script src="./vue-router.js"></script>
  <!--vue的ajax服务-->
	<!--<script src="https://cdn.jsdelivr.net/vue.resource/0.9.3/vue-resource.min.js"></script>-->
	<script>
		var a = Vue.extend({
			template:'<p>这是第一个组件视图{{name|getLength}}</p><vuemixintest></vuemixintest><vuemixintest2></vuemixintest2>',
			data:function(){
				return {
					name:'wsscat'
				}
			}
		})
		//自定义过滤器，value是从视图中获取的数据，处理完value后要用return把数据输出回来
		Vue.filter('getLength',function(value){
			console.log(value);
			
			return value+"字符串的长度为"+value.length;
		})
		//controller directive service
		//controller+templateUrl==component
		//Mixin sass
		var b = Vue.extend({
			template:'<p>这是第二个组件视图</p>',
			route:{
				data:function(transition){
					console.log(transition.to.params)
				}
			},
			data:function(){
				return {
				}
			},
			methods:{
			}
		})
		
		//混合，当我们在组件之间复用方法或者模板的时候，我们就可以定义一个mixins，然后在组件的mixins属性接受的数组中注入该mixins就可以使用
		var myMixin = {
			template:"<p>第一个混合</p>",
			methods:{
				hello:function(){
					console.log("hello");
				}
			}
		}
		//Vue.extend()定义组件
		var vuemixintest = Vue.extend({
			//注入mixins方法
			mixins:[myMixin],
			template:"<p>abc</p>",
			methods:{
				hello2:function(){
					console.log("hello2");
				}
			},
			ready:function(){
				this.hello();
				this.hello2();
			}
		})
		
		var vuemixintest2 = Vue.extend({
			mixins:[myMixin]
		})
		
		var vueheader = Vue.extend({
			//.vue
			template:"<header>今日笑话</header><style>header{width:100%;background-color:red;color:white;height:50px;line-height:50px;text-align:center}</style>"
		})
		var vuecontent = Vue.extend({
			template:"<vuelitest></vuelitest><ul><li v-for='jokeData in jokeDatas'>{{jokeData.content}}</li></ul><style>li{border-bottom:1px solid red}</style>",
			//该组件的数据，这些数据是属于该组件的，不会受到外部影响，也影响不了内部子组件的数据
			data:function(){
				return {
					jokeDatas:''
				}
			},
			//组件初始化完成后要运行的函数
			ready:function(){
				this.$http.jsonp('joke.php',{
					params:{
						page:1,
						callback:"JSON_CALLBACK"
					}
				}).then(
					function(data){
						console.log(data);
						this.jokeDatas = data.data.detail;
					},
					function(error){}
				)
			},
			//在组件定义的时候注册一些子组件，这些子组件就可以在该父组件的模板上使用
			component:{
				'vuelitest':vuelitest
			},
			methods:{
				
			}
		})
		var vuelitest = Vue.extend({
			template:"<ul><li>123</li><li>456</li></ul>"
		})
		//Vue.component()注册组件，必须先定义再注册，顺序不能乱
		Vue.component('vuecontent',vuecontent)
		Vue.component('vueheader',vueheader)
		Vue.component('vuelitest',vuelitest)
		Vue.component('vuemixintest',vuemixintest)
		Vue.component('vuemixintest2',vuemixintest2)
		
		var wsscat = Vue.extend({
			data:function(){
				return {
					name: 'wsscat'
				}
			}
		})
		
		//实例化一个路由对象
		var router = new VueRouter();
		//配置路由
		router.map({
			//切换到#!/a这个路由的时候我们注册并在<router-view>上显示这个组件
			'/a':{
				component:a
			},
			'/b/:name/:skill':{
				name:'b',
				component:b
			},
			'/index':{
				component:vuecontent
			},
			'/li':{
				component:vuelitest
			}
		})
		//当我们url没有匹配到任何路由时候，默认从/a开始
		router.redirect({
			'*':'/a'
		})
		//将wsscat组件绑定在id为app的标签上，整个路由的作用域就在这个wsscat组件内生效
		router.start(wsscat,'#app')
	</script>
</html>
